<template>
<div class="bh-form-horizontal bh-form-readonly bh-table-form bh-form-block" v-if="taskId && (!isFinishedTask || hasFlowComments)">
  <div class="form-validate-block">
    <div :class="{'bh-form-group': true,'bh-required': item.options.required}">
      <label class="bh-form-label bh-form-readonly-label" title="审批意见">审批意见</label>
      <div class="bh-ph-8 bh-form-readonly-input" emap-role="input-wrap">
        <div class="bh-form-placeholder bh-form-flow"></div>
        <emap-flow-comment 
          ref="emapFlowComment"
          v-if="defKey"
          :defKey="defKey" 
          :task-id="taskId"
          :options="item.options.options"
          :show-cur-comment="true"
          v-model="value"
          :showOldComment="showOldComment"
          :approval="approval"
          :model="model"
          :processInstanceId="processInstanceId"
          :placeholder="item.options.tip"
          :elecseal="item.options.elecseal"
          :esignature="item.options.esignature"
          :needElecseal="item.options.needElecseal"
          :needEsignature="item.options.needEsignature"
          :required="item.options.required"
          :readonly="item.options.readonly"
          :flowComentData="flowComentData"
          :style="{width: flowCommentWidth, margin: '5px 8px'}"
          @input="approvalInput2"
          @inputBlur="approvalInput"
          @approval-change="approvalChange"
          >
        </emap-flow-comment>
      </div>
    </div>
  </div>
</div>
</template>
<script>

// const turing = window["tg-turing"]
// const contextPath = turing.utils.getContextPath()
// const params = turing.utils.getUrlParam()
import { getFlowTaskComment  } from 'services/flow.service'

export default {
  name: 'audit-comment',
  data() {
    return {
      value: {},
      flowComentData: {},
      isFinishedTask: true,
      hasFlowComments: false,
      // flowCommentWidth: "800px"
    }
  },
  props: {
    defKey: String, 
    taskId: String,
    item: Object,
    approval: String,
    model: Object,
    processInstanceId: String,
    placeholder: String,
    elecseal: Boolean,
    esignature: Boolean,
    required: Boolean,
    showOldComment: {
      type: Boolean,
      default: true
    },

    options: Object,
  },
  computed: {
    flowCommentWidth: function() {
      var style = ""
      if(document.getElementsByClassName('bh-paper-pile-dialog-container').length > 0){
        style = document.getElementsByClassName('bh-paper-pile-dialog-container')[0].style
      }else{
        style = $("article")[0].style
      }
      var width = style.width;
      var padding = style.paddingLeft;
      if (!padding) {
        return width
      } else {
        return parseInt(width.slice(0, -2)) - parseInt(padding.slice(0, -2)) * 2 + "px";
      }
    },
  },
  mounted() {
    this.getFlowcomment()
  },
  methods: {
    getFlowcomment(){
      const _this = this
      const url = window.contextPath + "/sys/emapflow/definition/queryUserTaskToolbar.do";
      const params = {
        taskId: this.taskId
      };
      getFlowTaskComment(url, params).then(function(res) {
        _this.isFinishedTask = res.isFinishedTask;
      })

      const getComInfoUrl = window.contextPath + "/sys/emapflow/tasks/getFlowTaskComment.do";
      // processInstanceId 、taskId 二选一
      const getComInfoParams = {
        processInstanceId: this.processInstanceId,
        taskId: this.taskId
      };
      getFlowTaskComment(getComInfoUrl, getComInfoParams).then(function(res) {
        if(res.flowComments && Object.prototype.toString.call(res.flowComments) === '[object Array]'){
          if(res.flowComments.length > 0){
            _this.hasFlowComments = true
          }
        }
      })
    },
    approvalChange(obj){
      //此方法功能被覆盖，暂时保留
      this.$emit("change",obj)
      console.log(obj,"selectValue")
    },
    approvalInput(obj){
      this.flowComentData = obj
      this.$emit("change",obj)
      //更新下一步处理人
      const nextFlag = this.item.options.nextNode
      this.$emit("comment-change",obj, nextFlag)
    },
    approvalInput2(obj){
      console.log(obj)
    },
    getValue () {
      return this.value
    },
    setValue (val) {
      return this.value = val
    },
    validate () {
      if(this.$refs.emapFlowComment){
        return this.$refs.emapFlowComment.validate()
      }else{
        return true
      }
    }
  },
  watch: {
    
  }
}
</script>


